<template>
  <div class="resource-list">
    <el-card class="box-card">
      <!-- 展示筛选条件 -->
      <div slot="header" class="clearfix">
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          class="demo-form-inline">
          <el-form-item label="资源名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="资源名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="资源路径" prop="url">
            <el-input
              v-model="form.url"
              placeholder="资源路径"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="资源分类" prop="categoryId">
            <el-select
              v-model="form.categoryId"
              placeholder="资源分类"
              clearable>
              <el-option
                v-for="item in resourceCategory"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              :disabled="isLoading"
            >查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-group">
        <el-button type="mini" @click="dialogVisible = true">添加</el-button>
        <el-button
          type="mini"
          @click="$router.push({ name: 'resourceCategory' })"
        >资源分类</el-button>
      </div>
      <div>
        <!-- 展示资源列表 -->
        <el-table
          :data="resources"
          style="width: 100%"
          v-loading="isLoading">
          <el-table-column
            prop="id"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="资源名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="url"
            label="资源路径">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="180">
          </el-table-column>
          <el-table-column
            label="添加时间"
            width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createdTime | dateFormat(that) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.current"
          :page-sizes="[10, 15, 20]"
          :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :disabled="isLoading"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="添加资源"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form
        :model="resource"
        label-width="80px">
        <el-form-item label="资源名称">
          <el-input
            v-model="resource.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源路径">
          <el-input
            v-model="resource.url"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源分类">
          <el-select v-model="resource.categoryId">
            <el-option
              v-for="item in resourceCategory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="resource.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSaveResourse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getResourcePages,
  getResourceCategory,
  saveOrUpdate,
  deleteResource
} from '@/services/resources'
export default {
  data () {
    return {
      that: this,
      resources: [],
      form: {
        // 当前页号
        current: 1,
        // 每页的条数
        size: 10,
        // 资源分类的id
        categoryId: '',
        // 资源分类的名称
        name: '',
        // 资源分类的路径
        url: ''
      },
      // 总条数默认0
      total: 0,
      // 资源类型
      resourceCategory: [],
      isLoading: false,
      dialogVisible: false,
      resource: {
        name: '',
        categoryId: '',
        url: '',
        description: ''
      }
    }
  },
  created () {
    this.loadResources()
    this.loadResourcesCatogory()
  },
  methods: {
    // 分页查询请求
    async loadResources () {
      this.isLoading = true
      const { data } = await getResourcePages(this.form)
      console.log(data)
      if (data.code === '000000') {
        // 数据加载成功，解禁
        this.isLoading = false
        this.resources = data.data.records
        // 数据总条数
        this.total = data.data.total
      }
    },
    // 资源分类查询请求
    async loadResourcesCatogory () {
      const { data } = await getResourceCategory()
      if (data.code === '000000') {
        // console.log(data.data)
        this.resourceCategory = data.data
      }
    },
    handleSizeChange (val) {
      // 页面条数发生改变
      this.form.size = val
      // 页面条数发生改变时，需要将当前也还原为初始 1
      this.form.current = 1
      // 页面条数改变，请求接口
      this.loadResources()
    },
    handleCurrentChange (val) {
      // 当前页发生改变时，将 val 赋值给 current
      this.form.current = val
      // 当前页发生改变，请求接口
      this.loadResources()
    },
    // 按条件查询
    onSubmit () {
      // 手动把当前页改成 1
      this.form.current = 1
      this.loadResources()
    },
    onReset () {
      this.$refs.form.resetFields()
    },
    handleEdit (resource) {
      this.dialogVisible = true
      this.resource = resource
      console.log(resource)
    },
    handleDelete (resourceId) {
      console.log(resourceId)
      this.$confirm('确认删除该条数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await deleteResource(resourceId)
        if (data.code === '000000') {
          this.loadResources()
        }
        this.$message.success('删除资源成功!')
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    // 判断时间不足10的前面加0
    judgeDate (date) {
      if (date < 10) {
        return '0' + date
      } else {
        return date
      }
    },
    // 添加资源
    async handleSaveResourse () {
      const { data } = await saveOrUpdate(this.resource)
      if (data.code === '000000') {
        this.dialogVisible = false
        this.$message.success('添加资源成功！')
        this.loadResources()
      }
    }
  },
  filters: {
    dateFormat (date, that) {
      date = new Date(date)
      const year = date.getFullYear()
      const month = that.judgeDate(date.getMonth() + 1)
      const day = that.judgeDate(date.getDate())
      const hours = that.judgeDate(date.getHours())
      const minutes = that.judgeDate(date.getMinutes())
      const seconds = that.judgeDate(date.getSeconds())
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}

</script>
<style lang='scss' scoped>
.btn-group {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
